<template>
    <div class="report">
        <div class="header">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" @click="drill()">钻孔状态监控 </el-menu-item>
                <el-menu-item index="2">钻机实时状态图</el-menu-item>
                <el-menu-item index="3" @click="bb()">看板</el-menu-item>
            </el-menu>
            <div class="search">
                <el-input v-model="searchStat" placeholder="请输入设备状态" size="small" @keyup.enter.native="search" @input="getData"></el-input>
                <el-button type="primary" size="small" plain @click="search()">查询</el-button>
            </div>
        </div>
        <top></top>
        <div class="body">
            <div class="boxs" :style="{ backgroundColor: getColor(item.STAT) }" v-for="(item, index) in data"
                :key="index">
                <div class="b-top">编号：{{ item.DEV_ID }}</div>
                <div class="b-body">
                    <div class="b-tom">
                        <div class="b-zt">状态：{{ item.STAT }}</div>
                        <div class="b-jd">稼动率：{{ item.NOW_URATE }}% </div>
                    </div>
                    <div class="b-image"></div>
                </div>
                <div class="b-bottom">生产型号：<span>{{ item.DEV_CODE }}</span> </div>
            </div>

        </div>
    </div>
</template>

<script>
import { getData } from '@/api';
import Top from '@/components/top.vue';
import axios from 'axios';
export default {
    components: {
        "Top": Top,
    },
    data() {
        return {
            data: [],
            activeIndex: '1',
            activeIndex2: '1',
            searchStat: '',
            boxstyle: {
                '停机': '#F56C6C',
                '离线': '#909339',
                '待机': '#E6A23C',
                '默认': '#67C23A',
            },
        };
    },
    computed: {
        filteredData() {
            //限制查询条件
            return this.data.filter(item => item.STAT.includes(this.searchStat));
        }
    },
created(){
    this.data = this.filteredData;
    this.getData(); // 在组件创建时加载数据
},
    methods: {
        search() {
            this.data = this.filteredData;
        },
        getData() {
            axios.get('http://192.168.12.66/drillingOperation/getDrillingOperationList')
                .then(response => {
                    this.data = response.data;
                    console.log(this.data);
                })
                .catch(error => {
                    this.error = error;
                });
        },
        getColor(stat) {
            return this.boxstyle[stat] || this.boxstyle['默认']; // 如果状态不在map中，可以用默认值
        }, 
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        drill() {
            this.$router.push({ path: '/' })
        },
        bb() {
            this.$router.push({ path: '/VisualReport' })
        },
    },
}
</script>
<style lang="less" scoped>
.report {
    top: 0;
    left: 0;
    background-color: #f5f5f5;
    .header {
        display: flex;

        .el-menu {
            flex: 4;
            font-weight: bold;
            background-color: #6bda5c;
        }
        .search {
            flex: 1;
            display: flex;
            padding: 10px;
            background-color: #6bda5c;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            .el-input {
                margin-right: 10px;
            }
        }
    }
    .body {
        margin: 10px;
        padding: auto;
        display: flex;
        text-align: left;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        .boxs {
            margin: 5px;
            width: 250px;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            background-color: #67C23A;
            text-align: left;
            border: 1px solid #000;
            border-radius: 6px;
            .b-top {
                padding-top: 5px;
                text-align: center;
            }
            .b-body {
                display: flex;
                .b-tom {
                    font-size: 12px;
                    padding-left: 5px;
                    .b-zt {
                        padding-top: 10px;
                    }
                    .b-jd {
                        padding-top: 10px;
                    }
                }
                .b-image {
                    width: 150px;
                    height: 70px;
                    background-image: url(@/assets/zuanji.png);
                }
            }
            .b-bottom {
                padding-top: 5px;
                font-size: 14px;
                text-align: center;
            }
        }
    }
}
</style>
